

<template>
  <div class="panel-wrapper">
    <v-layout column justify-center class="panel px-4">
      <v-flex md9>
        <!-- <v-form action="login.jsp" method="post" id="loginForm"> -->
        <v-layout row wrap>
          <v-flex md12>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="account_circle"
              label="Login Account"
              v-model="loginAccount"
              type="text"
              name="username"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 mt-3>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="email"
              label="Email"
              v-model="email"
              type="text"
              name="email"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 mt-3 d-flex align-center>
            <v-flex md8>
              <v-text-field
                outline
                color="secondary"
                @change="onAuthCodeChange"
                prepend-inner-icon="security"
                label="Validation Code"
                v-model="authCode"
                type="text"
                name="email"
                hide-details
              ></v-text-field>
            </v-flex>
            <v-flex md4>
              <v-btn round flat :disabled="authBtn" @click="onGetAuthCode" color="primary">
                <span class="subTitle">{{ authText }}</span>
              </v-btn>
            </v-flex>
          </v-flex>
          <v-flex md12 mt-3>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="call"
              label="Phone Number"
              v-model="mobilePhone"
              type="number"
              name="mobilePhone"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 mt-3>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="lock"
              label="Password"
              v-model="password"
              type="password"
              name="password"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 mt-3>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="lock_outline"
              label="Repeat Password"
              v-model="confirmedPassword"
              type="password"
              name="password"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 text-xs-center mt-3>
            <v-btn @click="onRegister" round dark color="secondary" class="register-button">
              <span class="title">Sign Up</span>
            </v-btn>
          </v-flex>
        </v-layout>
        <!-- </v-form> -->
      </v-flex>
    </v-layout>
  </div>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from "js-cookie";
import { Login } from "@/api";
import { VerificationCodeVo, CustomUserLoginInfo } from "@/api/bean";
declare const $Vue: Vue;

const COUNT_DOWW = 60;

@Component
export default class Register extends Vue {
  private loginAccount: string = "";
  private email: string = "";
  private authCode: string = "";
  private mobilePhone: string = "";
  private password: string = "";
  private confirmedPassword: string = "";

  private authBtn: boolean = false;
  private authText: string = "Get Code";

  private countDown: number = COUNT_DOWW;

  private interval: any = null;

  private invitation: any = '';

  protected mounted() {
    // this.testData()
  }

  private testData() {
    this.loginAccount = "oiJJd";
    this.email = "8923748@qq.com";
    this.authCode = "123456";
    this.mobilePhone = "1891236430";
    this.password = this.confirmedPassword = "123456";
  }

  private validate() {
    let pass = true;
    let message = "";

    // username
    if (this.authCode === "") {
      message = "Please enter validation code";
      pass = false;
    }

    if (this.confirmedPassword === "") {
      message = "Please repeat password";
      pass = false;
    }

    if (this.password === "") {
      message = "Please enter password";
      pass = false;
    }

    if (this.email === "") {
      message = "Please enter email";
      pass = false;
    }

    if (this.loginAccount === "") {
      message = "Please enter account";
      pass = false;
    }

    if (this.confirmedPassword !== this.password) {
      message = "Repeat password ";
      pass = false;
    }

    if (!pass) {
      $Vue.$emit("snackbar", {
        message,
      });
    }

    return pass;
  }

  private checkInvitation() {
    let invitation: any = this.$route.query.invitation;
    if (invitation) {
      this.invitation = invitation.replace(' ', '+');
      localStorage.setItem('invitation', 'invitation');
    }
  }

  private onAuthCodeChange(value: string) {
    if (value.length === 6) {
      // this.validateAuthCode();
    }
  }

  // 注册成功后跳转到登录页
  private handleSuccess() {

    // this.$router.push({
    //   name: "Login"
    // });
  }

  private onGetAuthCode() {
    if (this.email === "") {
      return $Vue.$emit("snackbar", {
        message: "Please enter email address"
      });
    }

    let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (this.email.match(reg)) {
      // this.register();
      this.getAuthCode();
      this.authBtn = true;
      this.interval = setInterval(() => {
        this.authText = `Resend after ${this.countDown}s`;
        this.countDown--;
        if (this.countDown <= 0) {
          this.authBtn = false;
          this.authText = "Get Code";
          this.countDown = COUNT_DOWW;
          clearInterval(this.interval);
        }
      }, 1000);
    } else {
      return $Vue.$emit("snackbar", {
        message: "Invalid email address."
      });
    }
  }

  private onRegister() {
    if (!this.validate()) {
      return;
    } else {
      this.register();
      // this.validateAuthCode();
      // this.checkLoginAccount();
    }
  }

  /**
   * 注册
   */
  private async register() {
    // userType 1 为买家
    const params: any = {
      userType: 1,
      username: this.loginAccount,
      email: this.email,
      loginAccount: this.loginAccount,
      mobilePhone: this.mobilePhone,
      password: this.password,
      confirmedPassword: this.confirmedPassword
    };
    const { data } = await Login.handleRegister.r(params);
    console.log("handleRegister", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
      this.handleSuccess();
    } else {

    }
  }

  /**
   * 获取验证码
   */
  private async getAuthCode() {
    const params: VerificationCodeVo = {
      targetAddr: this.email,
      userType: 1,
    };
    const { data } = await Login.getAuthCode.r(params);
    console.log("getAuthCode", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
      // $Vue.$emit('snackbar', {
      //   message: '验证码已发送到邮箱',
      // });
    } else {
    }
  }

  /**
   * 验证
   */
  private async validateAuthCode() {
    const params: VerificationCodeVo = {
      targetAddr: this.email,
      code: this.authCode,
      userType: 1
    };
    const { data } = await Login.validateAuthCode.r(params);
    console.log("getAuthCode", data);
    if (data.result === 0) {
      $Vue.$emit("snackbar", {
        message: data.message
      });
      this.checkLoginAccount();
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 验证
   */
  private async checkLoginAccount() {
    const params: any = {
      loginAccount: this.loginAccount,
      userType: 1,
    };
    const { data } = await Login.checkLoginAccount.r(params);
    console.log("checkLoginAccount", data);
    if (data.result === 0) {
      console.log(data.data);
      if (data.data) {
        this.register();
        // this.validateAuthCode();
      }
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>


<style lang="less" scoped>
.panel-wrapper {
  // flex-basis: 26%;
  width: 24rem;
}
.panel {
  width: 100%;
  height: 36rem;
  border-radius: 2rem;
  background-color: #ffffffcb;
  .register-title {
    line-height: 2rem;
  }
}

.register-button {
  width: 12rem;
  height: 3rem;
}
</style>

